<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>用户名:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span>{{ userName }}</span>
          </div>
        </el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>真实姓名:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span>{{ realName }}</span>
          </div>
        </el-col>
      </el-row>
      <p/>

      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>当前角色:</span>
          </div>
        </el-col>
        <el-col>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
          </el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(city,index) in cities" :label="city.roleId" :key="index">{{ city.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p/>

      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>拥有权限:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span v-for="item in this.havePower" style="margin-left: 5px">{{ item }}</span>
          </div>
        </el-col>
      </el-row>
      <p/>


      <el-button type="success" @click="add">修改</el-button>


    </el-card>

  </div>
</template>

<script>
export default {
  name: "updateUserRole",
  data() {
    return {
      userName: '',
      realName: '',

      //初始化的数组
      cityOptions: [],
      //默认全选框是否被选中
      checkAll: false,
      //默认会选中的按钮，选中是按label里的值来判定的
      checkedCities: [],
      //初始化所有框体
      cities: this.cityOptions,
      isIndeterminate: false,
      //记录所有label的值，用于全选框判定是否全选
      roleIdArray: [],

      havePower: [],

      havenRoleId: [],
      userId:0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(val) {
      this.userId=val.userId
      this.havePower=[]
      this.checkedCities=[]
      this.userName = val.userName
      this.realName = val.realName
      let roleList = val.roleBeanList
      console.log(roleList)
      for (let i = 0; i < roleList.length; i++) {
        if (this.checkedCities.indexOf(roleList[i].roleId) === -1) {
          this.checkedCities.push(roleList[i].roleId)
        }
      }
      this.havenRoleId=this.checkedCities
      console.log(this.checkedCities)
      console.log(this.havenRoleId)

      let power = []
      for (let i = 0; i < this.checkedCities.length; i++) {
        let params = {
          roleId: this.checkedCities[i]
        }
        this.$axios.get('drp/role/findById', {params: params}).then(
            r => {
              let powerList = r.data.powerBeanList
              for (let y = 0; y < powerList.length; y++) {
                power.push(powerList[y].function)
              }
              for (let i = 0; i < power.length; i++) {
                if (this.havePower.indexOf(power[i]) === -1) {
                  this.havePower.push(power[i])
                }
              }
            }
        )
      }

      this.$axios.get('drp/role/findAll').then(
          r => {
            if (r.data != '') {
              this.cities = r.data
              console.log(r.data)
              for (let i = 0; i < r.data.length; i++) {
                this.cityOptions.push(r.data[i].roleName)
                this.roleIdArray.push(r.data[i].roleId)
              }
            }
          }
      )

    },
    add() {
      let formData = new FormData()
      formData.append("userId", this.userId)
      formData.append("roleIdArray", this.havenRoleId)
      this.$axios.post('drp/user/updateUserRelp', formData).then(
          r => {
            if (r.data == 'ok') {
              alert('更改成功')
              location.href = '/index'
            }
          }
      )
    },
    handleCheckAllChange(val) {
      let power = []
      this.havePower = []
      this.checkedCities = val ? this.roleIdArray : [];
      this.havenRoleId = this.roleIdArray
      this.isIndeterminate = false;

      for (let i = 0; i < this.checkedCities.length; i++) {
        let params = {
          roleId: this.checkedCities[i]
        }
        this.$axios.get('drp/role/findById', {params: params}).then(
            r => {
              let powerList = r.data.powerBeanList
              for (let y = 0; y < powerList.length; y++) {
                power.push(powerList[y].function)
              }
              for (let i = 0; i < power.length; i++) {
                if (this.havePower.indexOf(power[i]) === -1) {
                  this.havePower.push(power[i])
                }
              }
            }
        )
      }
    },
    handleCheckedCitiesChange(value) {
      this.havenRoleId = value
      console.log(this.havenRoleId)
      let power = []
      this.havePower = []
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      for (let i = 0; i < value.length; i++) {
        let params = {
          roleId: value[i]
        }
        this.$axios.get('drp/role/findById', {params: params}).then(
            r => {
              let powerList = r.data.powerBeanList
              for (let y = 0; y < powerList.length; y++) {
                power.push(powerList[y].function)
              }
              for (let i = 0; i < power.length; i++) {
                if (this.havePower.indexOf(power[i]) === -1) {
                  this.havePower.push(power[i])
                }
              }
            }
        )
      }
    }
  }
}
</script>

<style scoped>

</style>